<template>
	<view v-if="data">
		<!-- ugrid -->
		<!-- 属性的值非字符串  都需要使用:绑定 -->
		<uni-grid
			:column="2"
			:square="false"
			:highlight="false"
			:showBorder="false"
		>
			<uni-grid-item v-for="(item, index) in data.list" :key="index">
				<view class="item">
					<view>
						<image :src="item.roomSrc"></image>
						<view>
							<uni-icons type="person" color="white"></uni-icons>
							{{ item.nickname }}
						</view>
						<view>
							<uni-icons type="fire" color="white"></uni-icons>
							{{ item.hn }}
						</view>
					</view>
					<view>{{ item.roomName }}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 加载更多组件 -->
		<uni-load-more :status="status"></uni-load-more>
		<!-- 回到顶部按钮 -->
		<button
			@click="goTop"
			v-show="showBtn"
			type="warn"
			size="mini"
			style="position: fixed;right: 35rpx;bottom:100rpx;opacity: 0.7;"
		>
			回到顶部
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: null,
			status: 'more',
			showBtn: false,
			// 存储直播列表的类型
			type: null
		};
	},
	// 接收参数  发送请求
	onLoad(options) {
		// short_name: 'CF', tag_name: '穿越火线'}
		console.log(options);
		const { short_name, tag_name } = options;
		this.type = short_name;
		// 头部导航栏标题设置
		uni.setNavigationBarTitle({
			title: tag_name
		});
		this.getData();
		// 翻页第二页  大屏手机的高度
		// 分析：第一页和第二个同时加载的，可能由于网络原因 第一页还没有返回，第二页就返回回来了，第二页要往第一页拼接，找不到第一页数据。
		// 解决方案：确认第一页返回后，再请求第二页
	},
	// 监控页面滚动
	onPageScroll(e) {
		console.log(e.scrollTop);
		this.showBtn = e.scrollTop > 1500;
	},
	// 下拉事件
	onPullDownRefresh() {
		// 加载第一页数据
		this.getData();
	},
	// 触底事件
	onReachBottom() {
		// es6 解构语法
		const { nowPage, pageCount } = this.data;
		// 如果已经是最大页数 后续没有数据
		if (nowPage == pageCount) {
			this.status = 'noMore';
			return;
		}
		// 加载组件状态修改  loading  加载中
		this.status = 'loading';
		// 加载翻页数据
		this.getData(nowPage + 1);
	},
	// 发请求  拿数据  存本地  做展示
	// mounted() {
	// 	this.getData();
	// 	// 由于接口返回数据少，无法撑满大屏手机高度
	// 	// 没办法触底，无法使用触底加载
	// 	// 解决方案提前。把第二页获取回来
	// 	this.getData(2);
	// },
	methods: {
		// 回到顶部处理
		goTop() {
			// uni的API方法
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		getData(page = 1) {
			console.log('加载页数:', page);
			// proxy代理需要告知哪个接口地址需要代理
			// 加一个标识信息  /douyu
			const url = '/douyu/api/room/list?type='+this.type;
			uni.request({
				url,
				method: 'GET',
				// {page:page} 缩写为 {page}
				data: { page },
				success: res => {
					// 数据加载完成后，再停掉下拉状态
					uni.stopPullDownRefresh();
					console.log(res);
					// 大于初始页 需要拼接
					if (page > 1) {
						res.data.data.list = [
							...this.data.list,
							...res.data.data.list
						];
					}
					this.data = res.data.data;
					// 当页数为第一页时，为了大屏手机高度太高无法触底，再多加载一页
					if(page == 1){
						this.getData(2)
					}
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.item {
	padding: 10rpx;
	image {
		width: 100%;
		height: 250rpx;
		border-radius: 4px;
		display: block;
	}
	// css选择器 参考https://www.runoob.com/cssref/css-selectors.html
	> view:first-of-type {
		// 相对
		position: relative;
		> view:first-of-type {
			// 绝对
			position: absolute;
			left: 0;
			bottom: 0;
			color: white;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 4px;
			font-size: 0.9em;
		}
		> view:last-of-type {
			// 绝对
			position: absolute;
			right: 0;
			top: 0;
			color: white;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 4px;
			font-size: 0.9em;
		}
	}
	> view:last-of-type {
		font-size: 1.2em;
		// 一行折行隐藏  ...代替
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
